<template>
    <div class="respoitrymanage">
        <el-card class="box-card">
            <el-button type="primary" class="mb10" size="large" @click="addResp">添加仓库</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="serial" label="序号" width="180"> </el-table-column>
                <el-table-column prop="name" label="仓库名称" width="180"> </el-table-column>
                <el-table-column prop="contactName" label="联系人"> </el-table-column>
                <el-table-column prop="moblie" label="联系电话"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="checkDetail(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="query.pagenum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal"
            ></el-pagination>
        </el-card>

        <!-- 添加仓库面板 -->
        <el-dialog title="添加仓库信息" :visible.sync="addRespVisible" width="50%" v-dialogDrag>
            <el-form ref="form" :model="addform" label-width="80px">
                <el-form-item label="仓库名称">
                    <el-input v-model="addform.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="addform.contactName"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="addform.mobile"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addRespVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 查看详情面板 -->
        <el-dialog title="修改仓库信息" :visible.sync="editRespVisible" width="50%" v-dialogDrag>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="仓库名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="form.contactName"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="form.moblie"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editRespVisible = false">取 消</el-button>
                <el-button type="primary" @click="editRespVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getRepertoryList, addRepertory } from '@/api/Repertory.js'
export default {
  name: 'respoitrymanage',
  data () {
    return {
      query: {
        pagenum: 1,
        pagesize: 5
      },
      pageTotal: 1,
      addform: {},
      tableData: [],
      input: '',
      addRespVisible: false,
      editRespVisible: false,
      form: {}
    }
  },
  created () {
    this.getRepertoryList()
  },
  mounted () {

  },
  methods: {
    async getRepertoryList () {
      const { Data } = await getRepertoryList({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum
      })
      this.pageTotal = Data.paging.totalItemCount
      this.tableData = Data.list
      console.log(Data)
    },
    addResp () {
      // console.log(11)
      this.addRespVisible = true
    },
    checkDetail (role) {
      // console.log(11)
      this.form = role
      this.editRespVisible = true
    },

    async confirmAdd () {
      const data = await addRepertory({
        name: this.addform.name,
        contactName: this.addform.contactName,
        mobile: this.addform.mobile
      })
      console.log(data)
      if (data.RequestStatus !== 200) return this.$message.error('添加仓库失败')
      this.$message.success('添加仓库成功')
      this.addRespVisible = false
      this.addform = {}
      this.getRepertoryList()
    },

    // 分页的页数发生变化
    handlePageChange (newpagenum) {
      this.query.pagenum = newpagenum
      this.getRepertoryList()
    },

    // 每页显示的条数发生变化
    handleSizeChange (newpagesize) {
      this.query.pagesize = newpagesize
      this.getRepertoryList()
    }
  }
}
</script>

<style scoped>
.el-input {
    width: 400px;
}

.mb10 {
  margin-bottom: 10px;
}
</style>
